<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>my-print/src/Print.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_components_my-affix.html">$ui/components/my-affix</a></li><li><a href="module-$ui_components_my-anchor.html">$ui/components/my-anchor</a></li><li><a href="module-$ui_components_my-autocomplete.html">$ui/components/my-autocomplete</a></li><li><a href="module-$ui_components_my-avatar.html">$ui/components/my-avatar</a></li><li><a href="module-$ui_components_my-avatars.html">$ui/components/my-avatars</a></li><li><a href="module-$ui_components_my-back-top.html">$ui/components/my-back-top</a></li><li><a href="module-$ui_components_my-capture.html">$ui/components/my-capture</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-capture.html#~_renderImg">_renderImg</a></li></ul></li><li><a href="module-$ui_components_my-card-list.html">$ui/components/my-card-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-card-list.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-cascader.html">$ui/components/my-cascader</a></li><li><a href="module-$ui_components_my-checkbox.html">$ui/components/my-checkbox</a></li><li><a href="module-$ui_components_my-clipboard.html">$ui/components/my-clipboard</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-clipboard.html#~copy">copy</a></li></ul></li><li><a href="module-$ui_components_my-color-picker.html">$ui/components/my-color-picker</a></li><li><a href="module-$ui_components_my-contextmenu.html">$ui/components/my-contextmenu</a></li><li><a href="module-$ui_components_my-corner-mark.html">$ui/components/my-corner-mark</a></li><li><a href="module-$ui_components_my-crud.html">$ui/components/my-crud</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-crud.html#~openAddDialog">openAddDialog</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~reload">reload</a></li></ul></li><li><a href="module-$ui_components_my-date.html">$ui/components/my-date</a></li><li><a href="module-$ui_components_my-date-picker.html">$ui/components/my-date-picker</a></li><li><a href="module-$ui_components_my-description.html">$ui/components/my-description</a></li><li><a href="module-$ui_components_my-detail.html">$ui/components/my-detail</a></li><li><a href="module-$ui_components_my-detail-item.html">$ui/components/my-detail-item</a></li><li><a href="module-$ui_components_my-dialog.html">$ui/components/my-dialog</a></li><li><a href="module-$ui_components_my-drag.html">$ui/components/my-drag</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-drag.html#~getRelativeEl">getRelativeEl</a></li></ul></li><li><a href="module-$ui_components_my-drop.html">$ui/components/my-drop</a></li><li><a href="module-$ui_components_my-edit-tags.html">$ui/components/my-edit-tags</a></li><li><a href="module-$ui_components_my-editor.html">$ui/components/my-editor</a></li><li><a href="module-$ui_components_my-empty.html">$ui/components/my-empty</a></li><li><a href="module-$ui_components_my-filter.html">$ui/components/my-filter</a></li><li><a href="module-$ui_components_my-fixed.html">$ui/components/my-fixed</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-fixed.html#~resize">resize</a></li></ul></li><li><a href="module-$ui_components_my-flex.html">$ui/components/my-flex</a></li><li><a href="module-$ui_components_my-flex-item.html">$ui/components/my-flex-item</a></li><li><a href="module-$ui_components_my-flip.html">$ui/components/my-flip</a></li><li><a href="module-$ui_components_my-float.html">$ui/components/my-float</a></li><li><a href="module-$ui_components_my-float-item.html">$ui/components/my-float-item</a></li><li><a href="module-$ui_components_my-form.html">$ui/components/my-form</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-form.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-form.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-form_src_Base.html">$ui/components/my-form/src/Base</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html">$ui/components/my-form/src/common/TagInput</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html">$ui/components/my-form/src/common/TagSelect</a></li><li><a href="module-$ui_components_my-form_src_common_TreeSelect.html">$ui/components/my-form/src/common/TreeSelect</a></li><li><a href="module-$ui_components_my-header.html">$ui/components/my-header</a></li><li><a href="module-$ui_components_my-highlight.html">$ui/components/my-highlight</a></li><li><a href="module-$ui_components_my-icon.html">$ui/components/my-icon</a></li><li><a href="module-$ui_components_my-im-wall.html">$ui/components/my-im-wall</a></li><li><a href="module-$ui_components_my-input.html">$ui/components/my-input</a></li><li><a href="module-$ui_components_my-input-number.html">$ui/components/my-input-number</a></li><li><a href="module-$ui_components_my-layout.html">$ui/components/my-layout</a></li><li><a href="module-$ui_components_my-lazy.html">$ui/components/my-lazy</a></li><li><a href="module-$ui_components_my-list.html">$ui/components/my-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-list.html#~load">load</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~scrollTop">scrollTop</a></li></ul></li><li><a href="module-$ui_components_my-location-picker.html">$ui/components/my-location-picker</a></li><li><a href="module-$ui_components_my-login.html">$ui/components/my-login</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-login.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-marquee.html">$ui/components/my-marquee</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-marquee.html#~pause">pause</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-master-app.html">$ui/components/my-master-app</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-master-app.html#~initState">initState</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~setState">setState</a></li></ul></li><li><a href="module-$ui_components_my-menu.html">$ui/components/my-menu</a></li><li><a href="module-$ui_components_my-micro-app.html">$ui/components/my-micro-app</a></li><li><a href="module-$ui_components_my-navbar.html">$ui/components/my-navbar</a></li><li><a href="module-$ui_components_my-navbar-FullScreenAction.html">$ui/components/my-navbar-FullScreenAction</a></li><li><a href="module-$ui_components_my-navbar-IconAction.html">$ui/components/my-navbar-IconAction</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html">$ui/components/my-navbar-UserAction</a></li><li><a href="module-$ui_components_my-number.html">$ui/components/my-number</a></li><li><a href="module-$ui_components_my-panel.html">$ui/components/my-panel</a></li><li><a href="module-$ui_components_my-paragraph.html">$ui/components/my-paragraph</a></li><li><a href="module-$ui_components_my-pro.html">$ui/components/my-pro</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-pro.html#~addTab">addTab</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~closeTabs">closeTabs</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~setTab">setTab</a></li></ul></li><li><a href="module-$ui_components_my-promise.html">$ui/components/my-promise</a></li><li><a href="module-$ui_components_my-radial-menu.html">$ui/components/my-radial-menu</a></li><li><a href="module-$ui_components_my-radio.html">$ui/components/my-radio</a></li><li><a href="module-$ui_components_my-range.html">$ui/components/my-range</a></li><li><a href="module-$ui_components_my-rate.html">$ui/components/my-rate</a></li><li><a href="module-$ui_components_my-resize.html">$ui/components/my-resize</a></li><li><a href="module-$ui_components_my-result.html">$ui/components/my-result</a></li><li><a href="module-$ui_components_my-revolve.html">$ui/components/my-revolve</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-revolve.html#~next">next</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~prev">prev</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-search-box.html">$ui/components/my-search-box</a></li><li><a href="module-$ui_components_my-select.html">$ui/components/my-select</a></li><li><a href="module-$ui_components_my-sidebar.html">$ui/components/my-sidebar</a></li><li><a href="module-$ui_components_my-skeleton.html">$ui/components/my-skeleton</a></li><li><a href="module-$ui_components_my-slider.html">$ui/components/my-slider</a></li><li><a href="module-$ui_components_my-sortable.html">$ui/components/my-sortable</a></li><li><a href="module-$ui_components_my-spin.html">$ui/components/my-spin</a></li><li><a href="module-$ui_components_my-stat-card.html">$ui/components/my-stat-card</a></li><li><a href="module-$ui_components_my-switch.html">$ui/components/my-switch</a></li><li><a href="module-$ui_components_my-table.html">$ui/components/my-table</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-table.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-tabs.html">$ui/components/my-tabs</a></li><li><a href="module-$ui_components_my-tag-canvas.html">$ui/components/my-tag-canvas</a></li><li><a href="module-$ui_components_my-tag-input.html">$ui/components/my-tag-input</a></li><li><a href="module-$ui_components_my-tag-select.html">$ui/components/my-tag-select</a></li><li><a href="module-$ui_components_my-text.html">$ui/components/my-text</a></li><li><a href="module-$ui_components_my-timer.html">$ui/components/my-timer</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-timer.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-title.html">$ui/components/my-title</a></li><li><a href="module-$ui_components_my-tree-select.html">$ui/components/my-tree-select</a></li><li><a href="module-$ui_components_my-typography.html">$ui/components/my-typography</a></li><li><a href="module-$ui_components_my-water-fall.html">$ui/components/my-water-fall</a></li><li><a href="module-$ui_components_my-watermark.html">$ui/components/my-watermark</a></li><li><a href="module-$ui_components_my-wave.html">$ui/components/my-wave</a></li><li><a href="module-$ui_components_my-wrapper.html">$ui/components/my-wrapper</a></li><li><a href="module-widgets_my-print.html">widgets/my-print</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_components_my-stat-card.html#~event:action">action</a></li><li></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:add">add</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:back">back</a></li><li><a href="module-$ui_components_my-dialog.html#~event:cancel">cancel</a></li><li><a href="module-$ui_components_my-typography.html#~event:change">change</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-radial-menu.html#~event:click">click</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-avatars.html#~event:click-add">click-add</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-item">click-item</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-more">click-more</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:close">close</a></li><li></li><li><a href="module-$ui_components_my-pro.html#~event:collapse">collapse</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html#~event:collapsed">collapsed</a></li><li><a href="module-$ui_components_my-table.html#~event:column-change">column-change</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:command">command</a></li><li></li><li></li><li><a href="global.html#event:complete">complete</a></li><li></li><li><a href="module-$ui_components_my-typography.html#event:copy">copy</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drag.html#~event:drag">drag</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-start">drag-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-stop">drag-stop</a></li><li><a href="module-$ui_components_my-drop.html#~event:drop">drop</a></li><li><a href="module-$ui_components_my-typography.html#event:edited">edited</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:editing">editing</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:enter">enter</a></li><li><a href="module-$ui_components_my-table.html#~event:error">error</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:expand">expand</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:finish">finish</a></li><li><a href="module-$ui_components_my-dialog.html#~event:hide">hide</a></li><li><a href="module-$ui_components_my-lazy.html#~event:init">init</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:input-change">input-change</a></li><li><a href="module-$ui_components_my-drop.html#~event:leave">leave</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:link-click">link-click</a></li><li><a href="module-$ui_components_my-dialog.html#~event:load">load</a></li><li><a href="module-$ui_components_my-revolve.html#~event:loaded">loaded</a></li><li><a href="module-$ui_components_my-dialog.html#~event:maximize">maximize</a></li><li><a href="module-$ui_components_my-im-wall.html#~event:on-added">on-added</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-capture">on-capture</a></li><li><a href="global.html#event:on-change">on-change</a></li><li><a href="module-$ui_components_my-tag-canvas.html#~event:on-click">on-click</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-output">on-output</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:open">open</a></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:over">over</a></li><li><a href="global.html#~event:page-change">page-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:pki">pki</a></li><li><a href="module-$ui_components_my-revolve.html#~event:progress">progress</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:remove">remove</a></li><li><a href="module-$ui_components_my-timer.html#~event:reset">reset</a></li><li></li><li><a href="module-$ui_components_my-resize.html#~event:resize">resize</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-start">resize-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-stop">resize-stop</a></li><li><a href="module-$ui_components_my-search-box.html#~event:search">search</a></li><li><a href="module-$ui_components_my-sidebar.html#~event:select">select</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:show">show</a></li><li><a href="global.html#~event:size-change">size-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:start">start</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:stop">stop</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:submit">submit</a></li><li></li><li></li><li><a href="module-$ui_components_my-table.html#~event:success">success</a></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-panel.html#~event:tab-change">tab-change</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-remove">tab-remove</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-select">tab-select</a></li><li><a href="module-$ui_components_my-timer.html#~event:tick">tick</a></li><li><a href="module-$ui_components_my-form.html#~event:validate">validate</a></li><li><a href="module-widgets_my-back-top.html#event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#appendChildNode">appendChildNode</a></li><li><a href="global.html#createEllipsisContainer">createEllipsisContainer</a></li><li><a href="global.html#createEllipsisContentHolder">createEllipsisContentHolder</a></li><li><a href="global.html#destroyVue">destroyVue</a></li><li><a href="global.html#getData">getData</a></li><li><a href="global.html#inRange">inRange</a></li><li><a href="global.html#instanceVue">instanceVue</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#pxToNumber">pxToNumber</a></li><li><a href="global.html#removeEllipsisContainer">removeEllipsisContainer</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scrollTop">scrollTop</a></li><li><a href="global.html#setData">setData</a></li><li><a href="global.html#styleToString">styleToString</a></li><li><a href="global.html#wrapperDecorations">wrapperDecorations</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">my-print/src/Print.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;!-- 页面打印组件 -->
&lt;template>
  &lt;span @click="handlePrint">
    &lt;slot name="button">
      &lt;el-button :type="type" :class="btnClass">{{text}}&lt;/el-button>
    &lt;/slot>
  &lt;/span>
&lt;/template>
&lt;script>
import {
  addClass,
  removeClass,
  hasClass,
  setStyle
} from 'element-ui/lib/utils/dom'
/**
 * MyPrint
 * @module widgets/my-print
 * @author 李国师
 * @example
 *
 * // 使用说明
 *  &lt;my-print print-range=".pring-range1">
 *  &lt;/my-print>
 *
 * // ----------或使用slot-------
 *
 *  &lt;my-print print-range=".pring-range1">
 *    &lt;el-button type="primary" icon="el-icon-tickets" slot="button">&lt;/el-button>
 *  &lt;/my-print>
 */
/**
 * 作用域插槽
 * @member slot
 * @property {string} [button] 自定义按钮
 */
export default {
  name: 'MyPrint',
  /**
   * 属性参数
   * @member
   * @property {String} [text = '打印'] 按钮文字
   * @property {String} [type = 'default'] 按钮类型
   * @property {String} [btnClass] 按钮样式名称
   * @property {String} [printRange] 打印区域，css选择器，该参数为必须
   * @property {String} [containerClass = 'my-print-page-container'] 打印内容的容器className
   * @property {Function | HTMLElement | String} [parentDom] 作为父容器的dom对象，或者返回dom对象的方法,dom中必须包含container-class指定的className
   * @property {Object} [rootStyle] 顶层容器的样式,请不要设置position为absolute,relative或static, 否则分页效果会不起作用
   * @property {Function} [beforePrint] 在复制打印区域前执行，须返回promise对象
   * @property {Function} [afterPrint] 在打印完成之后执行
   * @property {String} [removeSelector] 打印时需要删除的元素选择器
   * @property {Array} [styleArray] 打印时须改变的样式数组，示例:[{selector: '.selector', style: {height: 'auto'}}]
   * @property {Function} [domTransfer] 自定义修改打印内容的方法
   * @property {Boolean} [disableDefaultStyle] 禁用默认样式数组，只使用style-array参数
   * @property {Boolean} [preview] 打印后不删除页面打印内容
   */
  props: {
    text: {
      type: String,
      default: '打印'
    },
    type: {
      type: String,
      default: 'default'
    },
    btnClass: {
      type: String,
      default: ''
    },
    printRange: {
      type: String,
      default: '',
      required: true
    },
    containerClass: {
      type: String,
      default: 'my-print-page-container'
    },
    parentDom: [HTMLElement, Function, String],
    rootStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    beforePrint: Function,
    afterPrint: Function,
    removeSelector: {
      type: String,
      default: ''
    },
    styleArray: {
      type: Array,
      default() {
        return []
      }
    },
    domTransfer: Function,
    disableDefaultStyle: Boolean,
    preview: Boolean
  },
  data() {
    return {
      handle: null,
      tDom: null,
      defaultStyles: [
        {
          selector: '.el-table',
          style: {
            height: 'auto'
          }
        },
        {
          selector: '.el-table__body-wrapper',
          style: {
            height: 'auto'
          }
        }
      ]
    }
  },
  methods: {
    handlePrint() {
      if (this.beforePrint &amp;&amp; typeof this.beforePrint === 'function') {
        this.beforePrint().then(() => {
          // this.print();
          this.cloneDom()
        })
      } else {
        // this.print();
        this.cloneDom()
      }
    },
    domTransferDefault(tDom) {
      // 顶层容器默认的样式，请不要设置position为absolute,relative或static, 否则分页效果会不起作用
      let style = {
        width: '100%',
        'max-width': '1200px',
        'background-color': '#fff',
        padding: '0 80px 0 0',
        'box-sizing': 'border-box'
      }
      // 使用者自行传入的样式，如果有同名样式，会覆盖掉
      if (this.rootStyle) {
        style = Object.assign(style, this.rootStyle)
      }
      setStyle(tDom, style)
      // 在打印之前可能需要删除某些元素，可通过removeSelector传入选择器将其删除
      if (this.removeSelector) {
        const removeDoms = tDom.querySelectorAll(this.removeSelector)
        for (let i = 0; i &lt; removeDoms.length; i++) {
          const item = removeDoms[i]
          if (item) {
            item.parentNode.removeChild(item)
          }
        }
      }
      // 在打印之前可能需要改变某些元素的样式，可以将一个数组通过styleArray传进来
      // 数组格式为 [{selector: '.selector-name',style: {height: 'auto'}}]
      let selectors
      if (!this.disableDefaultStyle) {
        selectors = this.defaultStyles.concat(this.styleArray).concat([
          {
            selector: this.printRange,
            style: {
              height: 'auto'
            }
          }
        ])
      } else {
        selectors = this.styleArray
      }
      // 迭代改变每个打印区域的每个dom元素
      for (let i = 0; i &lt; selectors.length; i++) {
        const elems = tDom.querySelectorAll(selectors[i].selector)
        for (let j = 0; j &lt; elems.length; j++) {
          setStyle(elems[j], selectors[i].style)
        }
      }
      // 如果使用者需要编写自己的转换逻辑，则使用domTransfer参数传递一个处理方法
      let tDomTransfered
      if (this.domTransfer &amp;&amp; typeof this.domTransfer === 'function') {
        tDomTransfered = this.domTransfer(tDom, this)
      } else {
        tDomTransfered = tDom
      }
      if (tDomTransfered) {
        return tDomTransfered
      } else {
        throw new Error('domTransfer方法须返回正确的dom元素')
      }
    },
    removePrintPreview() {
      console.log('remove preview')
      // 将打印区域外的元素重新显示
      const rootElems = document.querySelectorAll('body>*')
      for (let i = 0; i &lt; rootElems.length; i++) {
        removeClass(rootElems[i], 'my-print-displaynone')
        removeClass(rootElems[i], 'my-print-hide')
      }
      // 删除打印区域
      document.body.removeChild(this.tDom)
      this.tDom = null
    },
    createDom(innerHTML) {
      const con = document.createElement('div')
      con.innerHTML = innerHTML.toString()
      return con.childNodes[0]
    },
    prependDom(parent, elem) {
      parent.innerHTML = elem.outerHTML + parent.innerHTML
      return parent
    },
    closeAfterPrint() {
      this.handle = document.execCommand('print')
      if (this.handle) {
        // 如果不保留打印预览，则直接删除打印区域
        this.removePrintPreview()
        if (this.afterPrint &amp;&amp; typeof this.afterPrint === 'function') {
          this.afterPrint()
        }
      } else {
        setTimeout(() => {
          this.closeAfterPrint()
        }, 300)
      }
    },
    cloneDom() {
      if (this.printRange) {
        // 将打印区域筛选出来用一个div包裹起来
        const contents = document.querySelectorAll(this.printRange)
        const con = document.createElement('div')
        for (let i = 0; i &lt; contents.length; i++) {
          const cloneElem = contents[i].cloneNode(true)
          // 处理canvas元素，使用原来canvas对象的toDataURL方法生成base64,替换复制dom中的canvas
          const canvas = contents[i].querySelectorAll('canvas')
          const canvasClone = cloneElem.querySelectorAll('canvas')
          for (let j = 0; j &lt; canvas.length; j++) {
            const imgSrc = canvas[j].toDataURL()
            const img = document.createElement('img')
            img.src = imgSrc
            canvasClone[j].parentNode.replaceChild(img, canvasClone[j])
          }
          // 添加分页符样式，最后一页不加分页符，否则如果最后一页占满了，会多出一页空白页
          if (i !== contents.length - 1) {
            addClass(cloneElem, 'my-print-page-break')
          }
          // 将复制的打印区域添加到容器中
          con.appendChild(cloneElem)
        }
        // 使用一个容器再包裹，方便后面移除
        const tDom = document.createElement('div')
        // tDom.id = 'body-print-range';
        // 在顶层容器和打印内容之间可以添加DOM元素，但需指定打印内容所在的class名称
        if (this.parentDom) {
          let parentDom
          let parentCon
          if (this.parentDom instanceof HTMLElement) {
            parentDom = this.parentDom
          } else if (this.parentDom instanceof Function) {
            parentDom = this.parentDom()
          } else if (typeof this.parentDom === 'string') {
            parentDom = this.createDom(this.parentDom)
          } else {
            throw new Error('parent-dom必须为dom元素')
          }
          if (!(parentDom instanceof HTMLElement)) {
            throw new Error('parent-dom参数格式错误，无法生成合法的dom')
          }
          // 如果parentDom包含有container-class指定的类，则本身作为容器，否则查找内部是否有该类
          if (hasClass(parentDom, this.containerClass)) {
            parentCon = parentDom
          } else {
            parentCon = parentDom.querySelector('.' + this.containerClass)
          }
          if (parentCon) {
            parentCon.appendChild(con)
            tDom.appendChild(parentDom)
          } else {
            throw new Error('没找到父容器，检查是否缺少container-class参数')
          }
        } else {
          tDom.className = this.containerClass
          tDom.appendChild(con)
        }
        if (tDom) {
          const tDomTransfered = this.domTransferDefault(tDom)
          // body 下的元素都添加my-print-hide样式，打印时隐藏
          const rootElems = document.querySelectorAll('body>*')
          for (let i = 0; i &lt; rootElems.length; i++) {
            addClass(rootElems[i], 'my-print-hide')
          }
          this.tDom = tDomTransfered
          // 打印内容添加到body下
          document.body.appendChild(tDomTransfered)
        }
        // 添加打印预览头部
        const previewTitle = this
          .createDom(`&lt;div class="my-print-preview-title my-print-hide">
                                                    &lt;span class="title">打印预览&lt;/span>
                                                    &lt;div class="my-print-preview-close" onclick="handlePrint()">打印&lt;/div>
                                                    &lt;div class="my-print-preview-close" onclick="closePrintPreview()">关闭&lt;/div>
                                                &lt;/div>`)
        this.prependDom(tDom, previewTitle)

        // 如果尚未注册打印方法，则注册一个
        window.closePrintPreview = () => {
          this.removePrintPreview()
        }
        window.handlePrint = () => {
          this.print()
        }
        // 隐藏除打印区域外的内容
        const rootElems = document.querySelectorAll('body>*')
        for (let i = 0; i &lt; rootElems.length; i++) {
          if(rootElems[i] !== tDom) {
            addClass(rootElems[i], 'my-print-hide')
            if(this.preview) {
               addClass(rootElems[i], 'my-print-displaynone')
            }
          }
        }
        addClass(tDom, 'my-print-visible')
        if (!this.preview) {
          addClass(tDom, 'my-print-displaynone')
        }
        // 如果不预览直接打印
        if (!this.preview) {
          this.print()
        }
      }
    },
    print() {
      if (this.printRange) {
        setTimeout(() => {
          this.closeAfterPrint()
        }, 20)
      } else {
        window.print()
      }
    }
  }
}
&lt;/script>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Nov 18 2020 13:00:34 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
